<template>
  <div class="temple-edit">
    <div>
      <el-form ref="tableForm" :model="select" style="padding: 0 16px;">
        <div :class="
            item.condition && item.condition.length ? 'my-form' : 'my-form-none'
          " v-for="(item, index) in select.condition_list" :key="index">
          <el-table size="mini" ref="multipleTable" :data="item.condition" :header-cell-style="{ 'text-align': 'center' }" tooltip-effect="dark" style="width: 100%;">
            <el-table-column align="right" width="60">
              <template slot-scope="scope">
                <div style="height: 32px;" :class="['edit', 'add'].includes(scope.row.type) ?'text-temp-color':'text-temp'" v-if="scope.$index > 0">{{$t('且')}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="key" :label="$t('关键字')" align="center">
              <template slot-scope="scope">
                <el-form-item v-if="['edit', 'add'].includes(scope.row.type)" :prop="
                    'condition_list.' +
                      index +
                      '.condition.' +
                      scope.$index +
                      '.key'
                  " :rules="tableFormRules.key">

                  <el-select size="small" v-model="scope.row.key" :placeholder="$t('请选择关键字')">
                    <el-option v-for="(item, index) in keyList" :key="index" :label="$t(item)" :value="index">
                    </el-option>
                  </el-select>
                </el-form-item>
                <div v-else>
                  <span>{{ $t(keyList[scope.row.key]) }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="operator" :label="$t('符号')" align="center">
              <template slot-scope="scope">
                <el-form-item v-if="['edit', 'add'].includes(scope.row.type)" :prop="
                    'condition_list.' +
                      index +
                      '.condition.' +
                      scope.$index +
                      '.operator'
                  " :rules="tableFormRules.operator">
                  <el-select size="small" v-model="scope.row.operator" :placeholder="$t('请选择符号')">
                    <el-option v-for="(item, index) in operatorList" :key="index" :label="$t(item)" :value="index">
                    </el-option>
                  </el-select>
                </el-form-item>
                <span v-else>{{ $t(operatorList[scope.row.operator]) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="value" :label="$t('值')" align="center" width="300">
              <template slot-scope="scope">
                <el-form-item v-if="['edit', 'add'].includes(scope.row.type)" :prop="
                    'condition_list.' +
                      index +
                      '.condition.' +
                      scope.$index +
                      '.value'
                  " :rules="tableFormRules.value">
                  <el-input v-emoji v-model="scope.row.value" :placeholder="$t('请输入值')" size="small"></el-input>
                </el-form-item>
                <tooltip v-else :copyText="scope.row.value">
                </tooltip>
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center" width="200" v-if="type !== 'info'">
              <template slot-scope="scope">
                <div style="margin-bottom: 10px">
                  <el-button type="primary" plain size="small" v-if="['edit', 'add'].includes(scope.row.type)" @click="handleSave(scope.row, index, scope.$index, item.id)">{{ $t("保存") }}</el-button>
                  <el-button plain size="small" v-if="['edit', 'add'].includes(scope.row.type)" @click="handleCancel(scope.row, index, scope.$index)">{{ $t("取消") }}</el-button>
                  <el-button type="success" plain size="small" v-if="type === 'edit' ? false : scope.row.type === 'info'" @click="handleEdit(scope.row)">{{ $t("编辑") }}</el-button>
                  <el-button type="danger" plain size="small" v-if="scope.row.type === 'info'" @click="handleDel(scope.row, index, scope.$index, item.id)">{{ $t("删除") }}</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="my-icon" v-if="type !== 'info'">
            <el-button icon="el-icon-plus" @click="handleAdd(index)"></el-button>
          </div>
          <div class="text-temp-group" v-if="index > 0">
            {{$t('或')}}
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { scrollIntoView } from "@/utils/scrollIntoView";
export default {
  name: "TempleEdit",
  props: {
    type: {
      type: String,
      default: ""
    },
    select: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      keyList: {
        sip: "源IP",
        dip: "目的IP",
        sport: "源端口",
        dport: "目的端口"
      },
      operatorList: {
        equal: "等于",
        unequal: "不等于"
      },
      tableFormRules: {
        key: [{ required: true, message: this.$t('请输入内容'), trigger: "change" }],
        operator: [
          { required: true, message: this.$t('请输入内容'), trigger: "change" }
        ],
        value: [{ required: true, message: this.$t('请输入内容'), trigger: "blur" }]
      }
    };
  },
  methods: {
    handleEdit(item) {
      this.$emit("handleEditTemp", item);
    },
    handleDel(item, index, $index, id) {
      this.$emit("handleDelTemp", item, index, $index, id);
    },
    isValidateSave() {
      let result = true;
      for (const item of this.select.condition_list) {
        for (const v of item.condition) {
          if (v.type !== "info") {
            this.$messages.error(this.$t("请先保存当前编辑项"));
            result = false;
          }
        }
      }
      return result;
    },
    handleAdd(index) {
      if (!this.validateField("tableForm")) return;
      if (!this.isValidateSave()) return;
      this.$emit("handleAddTemp", index);
    },
    handleCancel(item, index, $index) {
      this.$emit("handleCancelTemp", item, index, $index);
    },
    handleSave(item, index, $index, id) {
      if (!this.validateField("tableForm")) return;
      this.$emit("handleSaveTemp", item, index, $index, id);
    },
    //对部分表单字段进行校验
    validateField(form) {
      let result = true;
      for (let item of this.$refs[form].fields) {
        this.$refs[form].validateField(item.prop, error => {
          if (error != "") {
            result = false;
          }
        });
      }
      if(!result) {
        this.$nextTick(() => {
          scrollIntoView()
        })
      }
      return result;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-card__body {
  padding: 12px 18px;
}
.my-form-none {
  display: none;
}
.info-list-card:not(:first-child) {
  margin-top: 14px;
}
.info-list-card {
  position: relative;
  padding: 0 24px;
  width: 95%;
  .btn-group {
    position: absolute;
    right: 5%;
    top: 20%;
  }
  .btn-text-temp {
    position: absolute;
    left: 0;
    top: 40px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
  }
  .info-list {
    display: flex;
    position: relative;
    padding: 0 16px;
    .btn-text {
      font-size: 16px;
      position: absolute;
      left: -2%;
      top: 0%;
      font-weight: 700;
      color: #000;
    }
    span {
      width: 33.33%;
    }
  }
  .info-list-header {
    color: #666;
  }
  .info-list-item {
    margin-top: 12px;
  }
  .btn-add {
    text-align: right;
  }
}
/deep/ .el-divider--horizontal {
  margin: 12px 0;
}
/deep/ .el-card__body {
  padding: 12px 18px;
}
.table-form-icon {
  font-size: 20px;
  cursor: pointer;
}
.my-form {
  padding: 12px 36px;
  position: relative;
  .my-icon {
    width: 100%;
    margin-top: 8px;
    text-align: center;
    .el-button {
      padding: 8px 38px;
    }
  }
  /deep/ .el-select,
  .el-input {
    // width: 80%;
  }
  /deep/ .el-table__row {
    position: relative;
  }
  .text-temp {
    color: #333;
    font-size: 16px;
    font-weight: 700;
  }
  .text-temp-color {
    color: #c0c4cc;
    font-size: 16px;
  }
  .text-temp-group {
    position: absolute;
    left: 0;
    top: 30px;
    transform: translateY(-50%);
    color: #333;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
